<template>
  <div class="order-edit">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <i class="el-icon-back"></i>
        <span @click="$router.go(-1)">返回</span>
      </div>
      <order-card
        :title="title"
        :model="model"
        :isShow="isShow"
        @click="editOrder"
      ></order-card>
    </el-card>
  </div>
</template>
<script>
import { getOrderDetail } from '@/api/order.js'
import OrderCard from './OrderCard.vue'
export default {
  components: {
    OrderCard
  },
  computed: {
    isShow() {
      return this.$route.query.from === 'isDetail'
    },
    title() {
      return this.$route.query.from === 'isEdit' ? '订单编辑' : '订单详情'
    }
  },
  data() {
    return {
      model: {}
    }
  },
  created() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      const res = await getOrderDetail(this.$route.query.id)
      this.model = res.data
    },
    editOrder(data) {
      // 发送编辑的请求
      console.log(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
}
</style>
